Valid XHTML 1.0! Valid CSS !

La Couleur et le Fond

Apres avoir vu, comment mettre en forme du texte en CSS, nous allons nous interessé ici à la couleur et aux images de fond.

La couleur du texte

Le language CSS offre un large choix de couleurs. Ce choix de couleurs ne devra pas être fait à la légère. En effet, les couleurs ont une symbolique : elles déterminent l'ambiance du site Web et forment son identité visuelle (charte graphique, hiérarchisation des informations et des pages les unes par rapport aux autres, etc.).
Comme pour indiquer la taille du texte, il existe différentes façons d'indiquer une couleur. Nous allons passer en revue ces techniques une par une.

Tout d'abbord, voici la propriété permettant de changer la couleur du texte. Il s'agit de color. On peut l'utiliser comme ceci pour changer par exemple la couleur de nos paragraphes :

Exemple :

p
{
color : votre_couleur ;
}

Comme pour font-size, la difficulté réside dans la valeur. Voyons voir toutes les façons qu'il y a d'indiquer une couleur

Indiquer la couleur avec un nom

C'est la technique la plus facile à utiliser mais le choix est restreint. En effet, seules 16 couleurs possèdent un nom. Les noms des couleurs doivent être écrits en anglais.

Les 16 couleurs standards :

Couleur Traduction
white Blanc
silver Argent (gris léger)
gray Gris (gris foncé)
black Noir
red Rouge
maroon Marron
lime Citron vert (vert clair)
green Vert
Couleur Traduction
yellow Jaune
olive Olive (jaune foncé)
aqua Bleu clair
blue Bleu
navy Marine (bleu foncé)
fuchsia Fuchsia (rose)
purple Violet
teal Bleu-vert

Ainsi si nous désirons mettres les textes importants (<strong>) en rouge pour qu'on ne puisse pas les manquer, nous pouvons les écrire en rouge:

strong
{
color : red ;
}

Appliquons cet exemple sur un exemple de code Xhtml :

<p> La licence professionnelle <strong> Im@sh </strong> est géniale </p>

Exemple

Indiquer la couleur en héxadécimal

16 couleurs, c'est bien mais ce n'est pas beaucoup ! Pour pouvoir indiquer une couleur précise, il va falloir utiliser une autre technique.
Une des possibilités consiste à écrire la valeur héxadécimale de la couleur.
En informatique, comme dans le monde de l'imprimerie, on peut obtenir toutes les couleurs que l'on veut en mélangeant du rouge, du vert et du bleu. En fonction des proportions de chacune de ces composantes, la couleur obtenue sera différente.
Voici un exemple de couleur écrite en hexadécimal : #CC6600. Cela ne se voit peut être pas mais il s'agit d'une couleur orange !
Ce code peut être décomposé en 4 parties :

Pour indiquer notre couleur en orange en héxadécimal, nous allons donc écrire :

strong
{
color : #CC6600;
}

Indiquer la couleur en RGB

RGB est l'abréviation de "Red, Green, Blue", soit "Rouge, Vert, Bleu" en anglais. C'est une notation plus facile à utiliser que l 'héxadécimal.
Cette fois au lieu d'écrire un code en base 16, nous pouvons écrire les quantités de rouge, vert et bleu en base 10, c'est à dire avec les nombres simple que nous avons l'habitude de manipuler.

Exemple :

strong
{
color : rgb(247,0,0) ;
}

Ainsi il faut écrire rgb suivi des quantités de rouge, vert et bleu entre parenthèses. Ces quantités peuvent varier de 0 (rien) à 255 (tout).
Notre exemple représente la couleur rouge. En effet il y a 255 (le maximum) de rouge, 0 pour le vert et 0 pour le bleu.

Le Fond

Après avoir vu comment changer la couleur du texte, nous allons maintenant nous intérésser au fond; c'est à dire comment modifier la couleur du fond, mais aussi comment mettre une image de fond.
Contrairement à ce qu'on pourrait croire, le fond ne désigne pas forcément toujours le fond de toute la page : on peut aussi changer la couleur de fond des paragraphes ou des titres, ce qui revient à surligner.

La couleur de fond

La propriété background-color permet de modifier la couleur de fond d'un élément. Pour la valeur, cela fonctionne exactement comme avec la propriété color :.

La couleur de fond de la page

Pour appliquer une couleur de fond à la page, il suffit de modifier le style de la balise qui englobe tout le contenu de la page, c'est à dire la balise <body>:

body
{
color : white ;
background-color : black;
}

Exemple

Grace au principe d'héritage, toutes les balises contenues dans <body> </body> ont récupéré le même style (on dit qu'elles ont hérité du style).
Ainsi ici Les éléments enfants (<p> et <strong>) ont hérité des valeurs du parent (<body>) (rapport contenant contenu).

La surlignement

La propriété background-color ne sert pas qu'à créer un fond pour toute la page. Si on l'applique à une autre balise que <body>, seul le texte à l'intérieur de cette balise prendra la couleur de fond. Cela équivaut à surligner.

Toujours sur l'exemple concernant la lp im@sh nous allons changer la couleur de fond de la balise <strong> : on va mettre le fond en rouge et le texte en jaune, ce qui va avoir pour effet de donner un effet de sulignement.

Exemple :

strong
{
color : yellow ;
background-color : red ;
}

Exemple

Le mot "Im@sh" est écrit en jaune sur fond rouge. En effet nous avons appliqué les changements de couleur à la balise <strong>.

L'image de fond

Tout comme la couleur de fond, l'image de fond peut être appliqué à certaines balises précises commme <p> et <strong> ou bien à toute la page avec <body>. Dans les exemples qui vont suivre, nous allons nous intéresser au fond de toute la page : nous allons donc appliquer le fond à la balise <body> .

Insérer une image de fond

Nous allons nous servir de la propriété background-image. Cette fois, pour indiquer la valeur, ce sera un peu différent. En effet nous n'allons pas indiquer une couleur mais un fichier. Ce fichier doit être une image qui servira d'image de fond.
La valueur s'écrit comme ceci : url :("image_de_fond.jpg"). L'image de fond peut être de n'importe quel type :JPEG, GIF, PNG ....

Dans l'exemple suivant nous allons mettre des briques en guise d'image de fond :

body
{
background-image : url("briques.bmp");
}

Exemple

Fixer l'image de fond

Lorsque l'on descend plus bas dans la page, le fond bouge en même temps que le texte. C'est ce qui se produit sur la majorité des sites. Toutefois il existe un effet intéressant que l'on peut facilement mettre en place. Il s'agit d'une technique permettant de fixer l'image de fond : celle ci ne bougera pas lorsque l'on fera défiler la page. Seul le texte se déplacera. Il s'agit de la propriété background-attachment. Elle peut prendre deux valeurs très simples :

Si on veut activer cet effet, il faut donc utiliser la valeur fixed. Reprenons l'éxemple précédent et précisons que nous voulons que le fond soit fixé :

body
{
background-image : url("briques.bmp");
background-attachment : fixed;
}

Exemple

Pour bien voir la différence entre scroll et fixed il faut ajouter dans le code XHTML des retours à la ligne (<br/>).

Répétition de l'image de fond

Par défaut, l'image de fond se répète à l'infini en mosaïque. C'est en effet ce que l'on veut la plupart du temps. Pourtant, il est aussi possible de limiter la répétition de l'image de fond grâce à la propriété background-repeat.

Voici les valeurs utilisables :

Nous allons tester la valeur repeat-y pour notre exemple.

Voici le code CSS :

body
{
background-image : url("7tutoban4f.jpg");
background-repeat : repeat-y;
}

Exemple

Comme nous pouvons le constater, le fond ne s'est répété que sur la première colonne comme prévu.

Positionner le fond

Comme nous le savons déjà, si nous utilisons la valeur no-repeat pour background-repeat le fond ne se répétera pas. Il sera placé en haut à gauche de la page. Mais si l'on souhaite placer le fond à un autre endroit sur la page, il nous faudra recourir à background-position.

Il faut donner 2 valeurs successivement à cette propriété : la position par rapport à la gauche de l'écran, et celle par rapport au haut de l'écran.
Ces valeurs peuvent être décrites soit en pixels, soit à l'aide de mots (en anglais).

En utilisant les pixels

Si l'on veut placer notre fond 300 pixels plus à droite et 100 pixels plus bas par rapport au coin en haut à gauche de la page, le code sera le suivant :

body
{
background-image : url("chien_lunettes.jpg") ;
background-repeat : no-repeat ;
background-position : 300px 100px ;
}

Exemple

L'image a bien été placé précisément à l'endroit demandé: 300 pixels plus à droite et 100 pixels plus bas.
Remarque : Attention à bien mettre le fond à no-repeat sinon la propriété background-position sera sans effet.

En utilisant des mots

Les valeurs en pixels permettent d'être très précis, c'est un avantage.Toutefois si l'on veut positionner notre fond en haut à droite de la page, l'on serez bien embêté. En effet, tout dépend de la taille de la fenêtre du visiteur :si sa fenêtre mesure 800 pixels de large, les valeurs à indiquer ne seront pas les mêmes que si elle avait été de 1024 pixels de large !

Pour résoudre le problème on utilise des valeurs sous forme de noms anglais qui nous permettent de décrire la position. On pourra ainsi dire " Je veux que mon fond soit en bas à droite ", ou encore je veux que mon fond soit centré sur la page ".

Voici les différents mots utilisables :

Combinons ces valeurs intelligemment pour placer le fond à l 'endroit désiré.
Nous allons placé notre chien à lunettes en haut à droite de la page :

body
{
background-image : url("chien_lunettes.jpg") ;
background-repeat : no-repeat ;
background-position : top right;
}

Exemple

Remarque : Les super-propriétés CSS

Nous avons vu un nombre important de propriétés CSS liées au fond de la page. Il n'est pas toujours évident de les retenir tous et il n'est pas agréable de devoir écrire 4 lignes pour indiquer comment doit s'afficher notre image de fond :

body
{
background-image : url("chien_lunettes.jpg") ;
background-repeat : no-repeat ;
background-attachment : fixed ;
background-position : top right;
}

C'est un peu long... Tout ça pour dire qu'on veut une image en haut à droite de l'écran qui reste fixé à cette position ! Pour simplifier un peu le problème, on a inventé ce qu'on appelle des "super-propriétés" CSS.
Une super-propriété est la combinaison de plusieurs propriétés CSS de base. Dans le cas du fond, on dispose de la super-propriété background. Ce qui est particulier avec une super-propriété, c'est qu'on peut lui donner plusieurs valeurs à la fois. L'on peut donc mélanger les valeurs de background-image, background-repeat, background-attachment et background-position.f

L'exemple ci-dessous produira le même résultat que le code de tout à l'heure. L'avantage est qu'il est plus court et facile à écrire :

body
{
background : url("chien_lunettes.jpg") no-repeat top right fixed ;
}

Il y a quelques règles pour les valeurs des super propriétés :

Les pseudos formats

Jusqu'ici nous avons appliqué nos styles CSS à des balises précises comme <p> ou <body>. Pour dynamiser un peu notre page, on a la possibilité d'utiliser des pseudo-formats. Ceux-ci permettent d'appliquer un style sur une balise (en général sur les balises liens) dans certaines conditions, comme lors du survol avec la souris, lors d'un clic, etc. Cela va nous permettre par exemple : "Je veux que mes liens soient écris en rouge lorsqu'on pointe dessus".

Un pseudo format s'écrit sous cette forme :

balise : pseudo-format
{
}

Au passage de la souris

Le pseudo-format : hover permet d'appliquer un style lorsque la souris pointe sur un élément.

Pour écrire un effet lorsqu'on pointe sur un lien (balise <a> ), on doit écrire le code CSS :

a:hover /* Apparence du lien lorsqu'on pointe dessus */
{
/* Placez les propriétés que vous voulez ici */
}

Exemple : Nous voulons que nos liens soient écrits en vert et que lorsqu'on pointe dessus, ils apparaissent en rouge et en gras.

a /* Apparence du lien par défaut */
{
color : green ;
}

a :hover /* Apparence du lien lorsqu'on pointe dessus */
{
color : red ;
font-weight : bold ;
}

Exemple

Lors du clic de la souris

Il est aussi possible de créer un effet qui se déclenche lorsqu'on clique sur un lien.
Le pseudo-format à utiliser est : active

Exemple:

a:active
{
background-color: lime ;
}

Exemple

Ansi lors du clic sur le lien un effet de surligement vert clair se produira sur le lien.

Remarque : le pseudo- format : focus

: focus est un format d'apparence très similaire à : active. Toutefois 2 précisions s'imposent sur ce pseudo-format :

Lorsque la page a déjà été vue

Il est possible de définir un style particulier pour les liens déjà visités. Cela permet à l'internaute de se souvenir des pages qu'il a déjà parcourues. Par défaut, les liens sont écrits en bleu lorsque ils n'ont pas étés encore visités, et en violet lorsque ceux-ci ont déjà étés visités.

Pour définir le style des liens déjà visités, on doit utiliser le pseudo-format : visited . Dans l'exemple suivant, les liens déjà visités apparaîtrons en italique :

a:visited
{
font-style: italic ;
}

Exemple

Séléctionner la première ligne

Les pseudos formats permettent aussi de ne s'occuper que de la première ligne d'un paragraphe. Le pseudo-format : :first-line permet cela :
Exemple si l'on veut que nos premières lignes de paragraphes soit de couleur rouge, écrit en Verdana :

p:first-line
{
color: red ;
font-family: Verdana ;
}

Exemple

Séléctionner la première lettre

Le pseudo-format :first-letter permet de selectionner la première lettre d'un mot ou d'un paragraphe.
Exemple si l'on veut que la première lettre de tous les paragraphes soit de 1,5 em et de couleur verte :

p:first-letter
{
color: green;
font-size: 1.5em ;
}

Exemple

Voir la partie sur les listes à puces en CSS.